Шаг 4. Размещаем проект на хостинге GitHub Pages

Для начала перейдём в раздел Settings.

Затем перейдём в раздел Pages.

После этого откроется раздел Pages.

Из самого интересного здесь — подразделы Source и Branch. В подразделе Source при нажатии на кнопку, которая установлена по умолчанию Deploy from a branch, откроется выпадающее меню.

В этом выпадающем меню можно выбрать GitHub Actions или Deploy from a branch. Через GitHub Actions можно подключить разные инструменты для автоматизации рутинных задач. Также через него можно использовать фреймворки, да и в целом кастомизировать процесс сборки. Нас же больше интересует второй вариант — Deploy from a branch, который установлен по умолчанию. С его помощью мы будем деплоить одну из наших веток, то есть размещать проект на хостинге.

В подразделе Branch нажмём на кнопку None. Появится выпадающее меню.

В нём выбираем, какую ветку будем деплоить. В нашем случае доступна только ветка main, поэтому её и выберем.

После этого появится ещё одна кнопка — /(root). По нажатию на неё откроется выпадающее меню, в котором будет предложено выбрать директорию. Это своего рода источник, из которого будет выполнена публикация.

Обычно оставляют значение по умолчанию, то есть /root. Это означает, что источником будет корневая директория. Если вы решите выбрать /docs, то данная директория должна присутствовать в вашем проекте, иначе вы получите ошибку. Так как у нас нет такой директории, оставим значение по умолчанию и нажмём на кнопку Save.

После этого раздел Pages перезагрузится, и появится дополнительный подраздел Custom domain. В нём можно привязать более красивый домен для вашего проекта.

Далее нужно подождать 2–3 минуты, так как происходит деплой, а затем перезагрузить страницу вручную. После этого появится уведомление о том, что проект задеплоился и можно перейти на сайт.

Теперь можно перейти по адресу, указанному в уведомлении — https://githtmlacademy.github.io/git-htmlacademy/. Этот адрес состоит из имени пользователя и названия проекта. У вас, возможно, будут другие данные. Затем нажмём на кнопку Visit site и посмотрим, что опубликовалось.

Сразу открылась новая вкладка в браузере. Мы видим, что на сайте даже есть немного контента — мы его добавляли на курсе.